<template>
  <div class="edit-popup">
    <popup
      ref="popupRef"
      :title="popupTitle"
      :async="true"
      width="500px"
      :clickModalClose="true"
      @confirm="handleSubmit"
      @close="handleClose"
    >
      <div class="flex flex-row">
        <div class="">
          <el-form
            ref="formRef"
            :model="formData"
            label-width="84px"
            :rules="formRules"
          >
            <!-- <el-form-item label="" prop="id">
          <el-input v-model="formData.id" placeholder="请输入" />
        </el-form-item> -->
            <el-form-item label="书名" prop="name">
              <el-input v-model="formData.name" placeholder="请输入书名" />
            </el-form-item>
            <el-form-item label="年级" prop="grade">
              <el-select
                class="flex-1"
                v-model="formData.grade"
                placeholder="请选择年级"
              >
                <el-option
                  v-for="(item, index) in dictData.年级"
                  :key="index"
                  :label="item.name"
                  :value="parseInt(item.value)"
                  clearable
                  :disabled="!item.status"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="科目" prop="subject">
              <el-select
                class="flex-1"
                v-model="formData.subject"
                placeholder="请选择科目"
              >
                <el-option
                  v-for="(item, index) in dictData.科目"
                  :key="index"
                  :label="item.name"
                  :value="parseInt(item.value)"
                  clearable
                  :disabled="!item.status"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="学段" prop="section">
              <el-select
                class="flex-1"
                v-model="formData.section"
                placeholder="请选择学段"
              >
                <el-option
                  v-for="(item, index) in dictData.学段"
                  :key="index"
                  :label="item.name"
                  :value="parseInt(item.value)"
                  clearable
                  :disabled="!item.status"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="教材版本" prop="edition">
              <el-select
                class="flex-1"
                v-model="formData.edition"
                placeholder="请选择教材版本"
              >
                <el-option
                  v-for="(item, index) in dictData.版本"
                  :key="index"
                  :label="item.name"
                  :value="parseInt(item.value)"
                  clearable
                  :disabled="!item.status"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="分册" prop="volume">
              <el-select
                class="flex-1"
                v-model="formData.volume"
                placeholder="请选择分册"
              >
                <el-option
                  v-for="(item, index) in dictData.分册"
                  :key="index"
                  :label="item.name"
                  :value="parseInt(item.value)"
                  clearable
                  :disabled="!item.status"
                />
              </el-select>
            </el-form-item>


            <el-form-item label="书籍父id" prop="pid">

              <el-input
              class="flex-1"
                v-model="formData.pid"
                placeholder="书籍父id"
              >
              </el-input>
            </el-form-item>

          </el-form>

          <div class="text-center flex justify-items-center">
            <div class="mr-2 ml-3">
              <span class="inline-block mt-10">
                <i class="text-red">*</i>上传封面 :</span
              >
            </div>
            <material-picker
              class="w-3/12 inline-block"
              v-model="formData.cover"
              type="image"
              :limit="1"
            />
          </div>

          <div class="text-center flex justify-items-center mt-3">
            <div class="mr-2 ml-3">
              <span class="inline-block mt-10">
                <i class="text-red"></i>上传pdf :</span
              >
            </div>
            <material-picker
              class="w-3/12 inline-block"
              v-model="formData.pdfUrl"
              type="file"
              :limit="1"
            />
          </div>
        </div>


      </div>
    </popup>
  </div>
</template>
<script lang="ts" setup>
import type { FormInstance } from "element-plus";
import { wisdbookEdit, wisdbookAdd, wisdbookDetail } from "@/api/wisdbook";
import Popup from "@/components/popup/index.vue";
import feedback from "@/utils/feedback";
import type { PropType } from "vue";
defineProps({
  dictData: {
    type: Object as PropType<Record<string, any[]>>,
    default: () => ({}),
  },
});
const emit = defineEmits(["success", "close"]);
const formRef = shallowRef<FormInstance>();
const popupRef = shallowRef<InstanceType<typeof Popup>>();
const mode = ref("add");
const popupTitle = computed(() => {
  return mode.value == "edit" ? "编辑智书" : "新增智书";
});
const bookCover = ref("");
const formData = reactive({
  id: "",
  name: "",
  grade: "",
  subject: "",
  section: "",
  edition: "",
  volume: "",
  cover: "",
  pdfUrl: "",
  pid:''
});

const formRules = {
  id: [
    {
      required: true,
      message: "请输入",
      trigger: ["blur"],
    },
  ],
  name: [
    {
      required: true,
      message: "请输入书名",
      trigger: ["blur"],
    },
  ],
  grade: [
    {
      required: true,
      message: "请选择年级",
      trigger: ["blur"],
    },
  ],
  subject: [
    {
      required: true,
      message: "请选择科目",
      trigger: ["blur"],
    },
  ],
  section: [
    {
      required: true,
      message: "请选择学段",
      trigger: ["blur"],
    },
  ],
  edition: [
    {
      required: true,
      message: "请选择教材版本",
      trigger: ["blur"],
    },
  ],
  volume: [
    {
      required: true,
      message: "请选择分册：0默认 1上册 2下册 3全一册",
      trigger: ["blur"],
    },
  ],
};

const handleSubmit = async () => {
  await formRef.value?.validate();
  const data: any = { ...formData };

  if (!data.cover || data.cover.length == 0) {
    feedback.alertError("请上传封面");
    return;
  }
  // if (!data.pdfUrl || data.pdfUrl.length == 0) {
  //   feedback.alertError("请上传pdf");
  //   return;
  // }

  // if (!(data.pdfUrl.indexOf('.pdf')>0)){
  //   feedback.alertError("请上传pdf");
  //   return;
  // }
  mode.value == "edit" ? await wisdbookEdit(data) : await wisdbookAdd(data);
  popupRef.value?.close();
  feedback.msgSuccess("操作成功");
  emit("success");
};
const open = (type = "add") => {
  mode.value = type;
  popupRef.value?.open();
};

const setFormData = async (data: Record<string, any>) => {
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      //@ts-ignore
      formData[key] = data[key];
    }
  }
};

const getDetail = async (row: Record<string, any>) => {
  const data = await wisdbookDetail({
    id: row.id,
  });
  setFormData(data);
};

const handleClose = () => {
  emit("close");
};

const updateImgSucces = (file: any) => {
  console.log("上传文件成功", file.data.path);

  if (file.data.path) formData.cover = file.data.path;
};

const updatePdfSucces = (file: any) => {
  console.log("上传文件成功", file.data.path);
  if (file.data.path) formData.pdfUrl = file.data.path;
};

defineExpose({
  open,
  setFormData,
  getDetail,
});
</script>
